<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免费内网穿透 | 登录</title>
    <link rel="shortcut icon" href="${request.contextPath}/icon/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="${request.contextPath}/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css" rel="stylesheet">
</head>
<style>
    /*按钮的class是通过浏览器的查看元素功能知道的*/
    body .layerBtn .layui-layer-btn0 {
        color: #FFF;
    }

    body .layerBtn .layui-layer-btn1 {
        color: #333;
    }
</style>
<body class="gray-bg">
<div class="loginColumns animated fadeInDown">
    <div class="row">
        <div class="col-md-6">
            <h2 class="font-bold">欢迎访问P+</h2>
<#--            <p>-->
<#--                Perfectly designed and precisely prepared admin theme with over 50 pages with extra new web app views.-->
<#--            </p>-->
<#--            <p>-->
<#--                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the-->
<#--                industry's standard dummy text ever since the 1500s.-->
<#--            </p>-->
<#--            <p>-->
<#--                When an unknown printer took a galley of type and scrambled it to make a type specimen book.-->
<#--            </p>-->
<#--            <p>-->
<#--                <small>It has survived not only five centuries, but also the leap into electronic typesetting, remaining-->
<#--                    essentially unchanged.</small>-->
<#--            </p>-->
        </div>
        <div class="col-md-6">
            <div class="ibox-content">
                <form id="login" class="m-t" role="form" action="index.html">
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" placeholder="请输入邮箱地址" required="">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control" placeholder="请输入密码" required="">
                    </div>
                    <div class="form-group">
                        <div class="checkbox i-checks">
                            <label>
                                <input type="checkbox"><i></i> 记住我
                            </label>
                        </div>
                    </div>
                    <a id="loginBtn" href="javascript:void(0);" class="btn btn-primary block full-width m-b">登 录</a>

                    <#--                    <a href="javascript:void(0);">-->
                    <#--                        <small>忘记密码?</small>-->
                    <#--                    </a>-->

                    <p class="text-muted text-center">
                        <small>还没有账号?</small>
                    </p>
                    <a class="btn btn-sm btn-white btn-block" href="${request.contextPath}/admin/register.html">创建账号</a>
                </form>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-6">
            COPYRIGHT 玩梗一时爽. ALL RIGHTS RESERVED.
        </div>
        <div class="col-md-6 text-right">
            <small>© 2021</small>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
<script src="${request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${request.contextPath}/js/popper.min.js"></script>
<script src="${request.contextPath}/js/bootstrap.js"></script>
<!-- iCheck -->
<script src="${request.contextPath}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${request.contextPath}/layer/layer.js"></script>
<script src="${request.contextPath}/js/qs.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $("#loginBtn").click(function () {
            let obj = Qs.parse($("#login").serialize());
            obj.remember = false;
            $("input[type=checkbox]").each(function () {
                if ($(this).prop('checked')) {
                    obj.remember = true;
                }
            })
            if (obj.email === "") {
                layer.alert("邮箱地址不能为空", {
                    icon: 0,
                    skin: 'layerBtn'
                });
                return false;
            }
            if (obj.password === "") {
                layer.alert("密码不能为空", {
                    icon: 0,
                    skin: "layerBtn"
                });
                return false;
            }
            const index = layer.load(1, {
                shade: [0.1, "#000"]
            });
            let res = $.ajax({
                url: "${request.contextPath}/admin/login/action",
                contentType: "application/json",
                type: "POST",
                dataType: "JSON",
                data: JSON.stringify(obj),
                async: false
            }).responseText;
            layer.close(index);
            res = JSON.parse(res);
            if (res.code === "200") {
                location.href = "${request.contextPath}/admin/home.html";
            } else {
                layer.alert(res.message, {
                    icon: 2,
                    skin: "layerBtn"
                });
            }
        });
    });
</script>
</html>
